<style rel="stylesheet/scss" lang="scss" scoped>
  .list-wrapper {
    display: flex;
    flex-wrap: wrap;
    line-height: 2;
    overflow: hidden;
    .content {
      font-size: .8rem;
      line-height: 2rem;
      display: flex;
      white-space: nowrap;
      background-color: #ffffff;
      p {
        width: 6rem;
        text-align: center;
        display: inline-block;
        span {
          display: block;
          margin: 0 0.2rem;
          padding: 0 0.2rem;
        }
      }
      p.selected span {
        color: #0994db;
        border-bottom: 2px #0994db solid;
      }
    }
  }
</style>
<template>
  <div class="list-wrapper" ref="wrapper">
    <div class="content">
      <p :class="item.selected?'selected':''" v-for="item in list"><span class="ell" @click="clickItem(item)">{{item.name}}</span>
      </p>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll';
  export default {
    props: {
      list: {
        type: Array
      },
      idName: {
        type: String,
        default: 'id'
      }
    },
    data(){
      return {
        scroll: null
      }
    },
    mounted(){
      this.refresh();
    },
    methods: {
      refresh(){
        this.scroll = new BScroll(this.$refs.wrapper, {
          scrollX: true,
          click: true,
          bounce: false
        });
      },
      clickItem(item){
        this.list.forEach(function (li) {
          li.selected = false;
        });
        item.selected = true;
        this.$emit('clickItem', item);
      },
      scrollSelected(){
          if(this.scroll){
            var that = this;
            setTimeout(function () {
              that.scroll.scrollToElement('.selected',200);
            }, 200);
          }
      }
    }
  }
</script>
